<template>
	<view class="edit">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar backgroundColor="#fff" color="#101010" :fixed='true' left-icon="back" right-text="保存" title="编辑资料" @clickRight="save" @clickLeft="back"></uni-nav-bar>
		

		<view class="outer">
			
			<view class="list " style="height: 176upx;line-height: 176upx;">
				<view class="left">
					照片
				</view>
				<view class="right">
					<!-- <image src="../../static/3.jpg" mode="" style=""></image> -->
					<upload-img class="up_img" :width="140" :height="140" :bgsrc="basicData.imgurl" @chooseimg="handleChooseImg">
					</upload-img>
					<uni-icons type="arrowright" size="18" style=" color: #87888a;float: right;margin-left: 20upx;"></uni-icons>
				</view>
			</view>
			<view class="list ">
				<view class="left">
					名称
				</view>
				<view class="right">
					<input type="text" v-model="basicData.person_name" placeholder="请输入">
				</view>
			</view>
			<view class="list ">
				<view class="left">
					从业经验
				</view>
				<view class="right">
					<picker @change="bindPickerChange" :value="index" :range="array">

						<view class="uni-input" v-if="basicData.working" style="color: #A4A8B7;font-size: 28upx;">{{ basicData.working }}</view>
						<view class="uni-input" v-else style="color: #A4A8B7;font-size: 28upx;">请选择</view>
					</picker>
					<uni-icons type="arrowright" size="18" style=" color: #87888a;float: right;margin-left: 20upx;"></uni-icons>
				</view>
			</view>
			<view class="list ">
				<view class="left">
					擅长项目
				</view>
				<view class="right" @click="goShanchang">
					<view class="uni-input" style="color: #A4A8B7;font-size: 28upx;">请选择</view>
					<uni-icons type="arrowright" size="18" style=" color: #87888a;float: right;margin-left: 20upx;"></uni-icons>
				</view>
			</view>
			<view class="list ">
				<view class="left">
					所属区域
				</view>
				<view class="right" @click="goQuyu">
					<view class="uni-input" style="color: #A4A8B7;font-size: 28upx;">请选择</view>
					<uni-icons type="arrowright" size="18" style=" color: #87888a;float: right;margin-left: 20upx;"></uni-icons>
				</view>
			</view>
		</view>
		<view class="header">
			工作经历
			<view @click="add">添加 </view>
		</view>
		<view class="content">
			<view class="list">
				<view class="listItem" v-for="(item,index) in workexpData" :key="index">
					<view class="time">{{ item.startTime }} ~ {{ item.endTime }}</view>
					<view class="inner">
						<view class="left">{{ item.content }}</view>
						<view class="right" v-if="sp_id" @click="del_work(item)">
							<view>
								<uni-icons type="trash" size="18" style=" color: #FF6969 "></uni-icons>
							</view>
							<view>移除</view>
						</view>
						<view class="right" v-else>
							
						</view>
					</view>
				</view>
			
				
			</view>

		</view>

	</view>

</template>

<script>
	import uploadImg from '@/components/uploadimg/uploadimg.vue'
	import {
		pathToBase64
	} from '@/server/image-tools'
	import {
		mapGetters
	} from 'vuex';
	var _this = this
	export default {
		computed: {
			...mapGetters([
				"workArr"
			])
		},
		components: {
			uploadImg
		},
		data() {
			return {
				index: "",
				array: ['1年以下', '1年', '2年', '3年', '4年', '5年', '6年', '7年', '8年', '9年', '10年', '11年', '12年', '13年', '14年', '15年',
					'16年', '17年', '18年', '19年', '20年', '20年以上'
				],

				workexpData: [], //工作经历
				basicData: {}, //人员信息

				Base64_img: '', //图骗地址
				bind_serve: [], //擅长项目，服务ID数组
				bind_area: [],
				workexp: [],
				sp_id:''

			}
		},
		onLoad(e) {
			_this = this
			uni.$off("showXM")
			uni.$on("showXM", data => {

				this.bind_serve = data
				// _this.bind_serve = 
			})
			uni.$off("showQY")
			uni.$on("showQY", data => {
				_this.bind_area = data
				console.log(_this.bind_area)
			})
			console.log(e)
			this.sp_id = e.sp_id;
		},
		methods: {
			delWorkExp(ex_id){
				this.$store.dispatch("delWorkExp", {ex_id: ex_id}).then(res => {
					if (res.code == 1) {
						this.getServerInfo()
						uni.showToast({
							icon:"none",
							title:res.msg
						})
					}else{
						uni.showToast({
							icon:"none",
							title:res.msg
						})
					}
				})
			},
			del_work(item){
				console.log(item)
				this.delWorkExp(item.ex_id)
			},
			del_work_1(item){
				console.log(item)
			},
			
			
			handleChooseImg(e) {
				console.log(e.src)
				this.imgurl = e.src
				pathToBase64(e.src).then(res => {
					this.Base64_img = res
				})

			},
			////////////////////////////////////////////////////////////////////////////////////////////////////新增服务人员
			addServer(imgurl, person_name, working, bind_serve, bind_area, workexp) {
				this.$store.dispatch("addServer", {
					imgurl: imgurl,
					person_name: person_name,
					working: working,
					bind_serve: bind_serve,
					bind_area: bind_area,
					workexp: workexp
				}).then(res => {
					if (res.code == 1) {
						uni.navigateBack({})
						uni.$emit('addyes', {
						    data:'yes'
						})
					}else{
						uni.showToast({
						    title: res.msg,
						    icon:'none'
						});
					}
				})
			},
			
			/////////////////////////////////////////////////////////////////////////////////////////////////////////更新人员资料
			updateServerInfo(imgurl, person_name, working, bind_serve, bind_area) {
				this.$store.dispatch("updateServerInfo", {
					sp_id:this.sp_id,
					person_name: person_name,
					imgurl: imgurl,
					working: working,
					bind_serve: bind_serve,
					bind_area: bind_area
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
					}
				})
			},
			
			save() {
				// console.log(_this.bind_serve)
				// console.log(_this.bind_area)
				// console.log(this.Base64_img);            //图片地址
				// console.log(this.basicData.person_name); //名字 person_name
				// console.log(this.basicData.working);               //从业经验，年数 working
				
				
				if(this.sp_id){
					this.updateServerInfo(this.Base64_img,this.basicData.person_name,this.basicData.working,this.bind_serve,this.bind_area);
				}else{
					this.addServer(this.Base64_img,this.basicData.person_name,this.basicData.working,this.bind_serve,this.bind_area,this.workArr);
				}
				
			},
			back() {
				// this.$router.go(-1)
				uni.navigateBack({})
			},
			add() {
				if(this.sp_id){
					uni.navigateTo({
						url: '../../component/addJingli/index?sp_id=' + this.basicData.sp_id
					})
				}else{
					uni.navigateTo({
						url: '../../component/addJingli/index'
					})
				}
				

			},
			goShanchang() {
				var id = ""
				if (this.sp_id) {
					id = this.sp_id
				}
				uni.navigateTo({
					url: '../../component/shanchang/index?id=' + id,

				})
			},
			goQuyu() {
				var id = ""
				if (this.sp_id) {
					id = this.sp_id
				}
				uni.navigateTo({
					url: '../../component/quyu/index?id=' + id
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.basicData.working = this.array[e.target.value]
			},
			//编辑人员资料获取基本信息
			getServerInfo() {
				this.$store.dispatch("getServerInfo", {
					sp_id: this.sp_id
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.workexpData = res.data.workexp;
						this.basicData = res.data.basic
					}
				})
			}
		},
		created() {
			uni.$on('addwork',(res=>{
				this.getServerInfo()
			}))
			
			if (this.sp_id) {
				this.getServerInfo()
			} else{
				this.workexpData = this.workArr
			}
		},
		watch: {
			bind_serve(val) {
				this.bind_serve = val
				console.log(this.bind_serve)
			}
		}
	}
</script>

<style lang="less">
	.edit {
		height: 100%;
		width: 100%;
		background-color: #F7F7F7;

		.outer {
			.list {
				height: 88upx;
				background: white;
				line-height: 88upx;
				padding: 0 30upx;
				border-bottom: 1upx solid #F7F7F7;
				display: flex;
				justify-content: space-between;
				font-size: 32upx;

				image {
					width: 120upx;
					height: 120upx;

					margin-top: 28upx;
				}

				.left {
					width: 140upx;
					font-size: 28upx;
				}

				.right {
					text-align: right;
					width: calc(100% - 140upx);
					display: flex;
					justify-content: flex-end;
					align-items: center;

					input {
						height: 88upx;
						line-height: 88upx;
						font-size: 28upx;
						color: #A4A8B7;
					}

					.uni-input-input,
					.uni-input-placeholder {
						color: #A4A8B7;
					}
				}


			}
		}

		.header {
			font-size: 32upx;
			font-weight: 550;
			position: relative;
			padding: 0 30upx;
			margin-top: 60upx;

			view {
				float: right;
				color: #007aff;

			}
		}

		.content {
			margin-top: 20upx;
			background-color: white;

			.list {

				// margin-bottom: 20upx;
				.listItem {
					width: calc(100% - 60upx);

					padding: 20upx 30upx;
					padding-bottom: 22upx;
					position: relative;
					border-bottom: 2rpx solid #eee;

					.time {
						font-size: 28upx;
						color: #A4A8B7;

					}

					.inner {
						width: 100%;
						margin-top: 6upx;
						font-size: 32upx;
						color: #262E34 10000%;
						display: flex;
						justify-content: space-between;

						.left {
							width: calc(100% - 110upx);
							word-break: break-all;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							/* 这里是超出几行省略 */
							overflow: hidden;
							font-weight: 600;
						}

						.right {
							width: 60upx;
							text-align: center;
							color: #FF6969;
							font-size: 24upx;
						}

					}





				}


			}
		}


	}
</style>
